<template>
	<div style="height: 100%">
		<div :class="[$route.query.technologyDictCode != '8' && $route.query.status != '1' ? 'contentnew' : 'contents']">
			<div :class="[$route.query.technologyDictCode != '8' && $route.query.status != '1' ? 'contentsLefts' : 'contentsLeft']">
				<el-card class="box-card">
					<div slot="header" class="clearfix" style="display: flex; justify-content: space-between; align-items: center">
						<div style="width: 80%">填写内容</div>
						<div>
							<el-dropdown>
								<div style="color: #37b3b3">零件图号表</div>
								<el-dropdown-menu slot="dropdown" class="userdropdown">
									<el-table :data="listParts" border="">
										<el-table-column label="序号" align="center" type="index" width="55" />
										<el-table-column label="零件名称" prop="partName" min-width="150" :show-overflow-tooltip="true" />
										<el-table-column label="零件数量" prop="partQuantity" min-width="150" :show-overflow-tooltip="true" />
										<el-table-column label="型号" prop="partFigure" min-width="150" :show-overflow-tooltip="true" />
									</el-table>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</div>
					<div id="editorVal" v-html="form.content" @input="inputData($event)"></div>
				</el-card>
			</div>
			<div class="contentsRight">
				<!-- <el-card v-if="$route.query.technologyDictCode == '8'" class="box-card">
					<div slot="header" class="clearfix">
						<span>合格标志</span>
					</div>
					<div>
						<div class="conclusionFlag">
							<div class="conclusionTitle" style="margin-right: 20px; width: 40px">标志</div>
							<el-select v-model="form.conclusionFlag">
								<el-option v-for="item in conclusionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
							</el-select>
						</div>
						<div class="conclusionFlag" style="margin-top: 15px">
							<div class="conclusionTitle" style="margin-right: 20px; width: 40px">结论</div>
							<el-input v-model="form.conclusion" maxlength="100" show-word-limit  style="width: 90%" type="textarea"></el-input>
						</div>
					</div>
				</el-card> -->
				<el-card v-if="$route.query.status == '1'" class="box-card">
					<div slot="header" class="clearfix">
						<span>完成人员</span>
					</div>
					<el-select v-model="form.accomplishUserId" @change="selectaccomplishUser">
						<el-option v-for="item in workshopSectionList" :key="item.userId" :value="item.userId" :label="item.nickName"></el-option>
					</el-select>
				</el-card>
			</div>
		</div>
		<div slot="footer" class="dialog-footers" v-if="$route.query.status != 3">
			<el-button type="primary" @click="submitData(1)" v-if="$route.query.status == '1'">修 改</el-button>
			<el-button type="primary" @click="submitData(2)" v-if="$route.query.status == '2'">暂 存</el-button>
			<el-button type="primary" @click="submitData(3)" v-if="$route.query.status == '2' || $route.query.status == '1'">确 认</el-button>
			<el-button @click="goback">取 消</el-button>
		</div>
	</div>
</template>

<script>
import { getRepairProductProcess, fillIn } from "@/api/army/unqualified"
import { productPart, sectionUser } from "@/api/selectList"
export default {
	name: "writes",
	data() {
		return {
			conclusionList: [
				{
					id: "1",
					name: "合格"
				},
				{
					id: "2",
					name: "不合格"
				},
				{
					id: "3",
					name: "压力不降"
				},
				{
					id: "4",
					name: "工作正常"
				},
				{
					id: "5",
					name: "无泄漏"
				}
			],
			// 原因列表
			reasonList: [],
			// 步骤选中数据
			checkList: [],
			// 选中零件下拉框数据
			selectPartList: [],
			open: false,
			// 零件数量列表
			Nums: [],
			htmlStr: "",
			form: { content: "", trepairProductProcessSteps: [] },
			// 新增零件下拉框数据
			listParts: [],
			// 填写内容零件名称
			partName: "",
			// 更补渲染的数据
			finallylist: [],
			hasPart: false,
			// 新增得数据
			addProductlist: [],
			// 工段人员
			workshopSectionList: [],
			partLists: [],
			getData: [],
			copyList: [],
			addrightList: []
		}
	},
	created() {
		this.$route.query.id && this.getDetails()
		this.$route.query.repairProductId && this.getPart()
	},
	activated() {
			this.$route.query.id && this.getDetails()
		this.$route.query.repairProductId && this.getPart()
		this.getPart()
	},
	methods: {
		getPart() {
			productPart(this.$route.query.repairProductId).then(res => {
				this.listParts = res.rows
			})
		},
		addData() {
			let Array = JSON.parse(JSON.stringify(this.copyList))
			let ArrayPart = JSON.parse(JSON.stringify(this.addrightList))
			let aa = JSON.parse(JSON.stringify(this.form.trepairProductProcessStepParts))
			ArrayPart.push(...Array, ...aa)
			Array.forEach((item, index1) => {
				ArrayPart.forEach((items, index) => {
					if (item.productPartId == items.productPartId) {
						item.replacementSituation = item.replacementSituation ? item.replacementSituation : items.replacementSituation
						item.partQuantity = item.partQuantity ? item.partQuantity : items.partQuantity
						ArrayPart.splice(index, 1, {
							id: items.id || "",
							partQuantity: item.partQuantity,
							productPartId: item.productPartId,
							partName: items.partName || item.partName,
							replacementSituation: item.replacementSituation,
							disable: items.disable || item.disable,
							mustChangeFlag: items.disable ? 0 : 1 || item.disable ? 0 : 1
						})
					}
				})
			})
			var mergedArray = ArrayPart.reduce(function (result, obj) {
				var target = result.find(function (item) {
					return item.productPartId === obj.productPartId
				})
				if (target) {
					Object.assign(target, obj)
				} else {
					result.push(obj)
				}
				return result
			}, [])
			console.log(mergedArray)
			this.partLists = mergedArray
		},
		// 去重
		removeSame1(arr) {
			let map = new Map()
			for (let item of arr) {
				// map.has()方法判断map中是否存在这个键
				// 不存在，则将键和值同时设置到map集合中，
				if (!map.has(item.productPartId)) {
					map.set(item.productPartId, item)
				}
			}
			// 返回map的值
			return [...map.values()]
		},
		selectaccomplishUser(e) {
			this.workshopSectionList.forEach(item => {
				if (e == item.userId) {
					this.form.accomplishUserName = item.nickName
				}
			})
		},
		geSection() {
			sectionUser(this.$route.query.workshopSectionId).then(res => {
				this.workshopSectionList = res.rows
			})
		},
		goback() {
			this.$router.go(-1)
		},
		// 填写工卡
		submitData(status) {
			const loading = this.$loading({
				lock: true,
				text: "Loading",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)"
			})
			fillIn({
				content: document.getElementById("editorVal").innerHTML,
				id: this.$route.query.id,
				submitStatus: this.$route.query.status == 1 ? (status == 3 ? 4 : status) : status
			})
				.then(res => {
					this.$modal.msgSuccess(status == "2" ? "暂存成功" : status == "3" ? "提交成功" : "修改成功")
					loading.close()
					this.$router.go(-1)
				})
				.finally(() => {
					loading.close()
				})
		},
		submitForm() {
			if (this.selectPartList.length) {
				Promise.all([this.hasproductPart()]).then(res => {
					if (this.hasPart) {
						this.$modal.msgError("请不要添加相同的零件")
						setTimeout(() => {
							this.selectPartList = []
						}, 1000)
					} else {
						this.selectPartList.forEach(item => {
							this.listParts.forEach(items => {
								if (item == items.partId) {
									this.addrightList.push({
										productPartId: items.partId,
										partQuantity: null,
										partName: items.partName,
										disable: false,
										mustChangeFlag: 1,
										replacementSituation: null
									})
								}
							})
						})
						this.open = false
						this.addData()
					}
				})
			} else {
				this.$modal.msgError("请先选择零件")
			}
		},
		hasproductPart() {
			this.hasPart = false
			this.selectPartList.forEach(item => {
				this.partLists.forEach(items => {
					if (item == items.productPartId) {
						this.hasPart = true
					}
				})
			})
		},
		addPart() {
			this.open = true
			this.selectPartList = []
		},
		getDetails() {
			this.Nums = []
			this.reasonList = []
			this.finallylist = []
			this.addrightList = []
			this.copyList = []
			getRepairProductProcess(this.$route.query.id).then(response => {
				this.form = response.data
				this.$nextTick(() => {
					var testEditor = document.getElementById("editorVal")
					var obj = testEditor.getElementsByTagName("input")
					Array.prototype.forEach.call(obj, function (v, index) {
						v.id = index
						if (v.type && v.type == "text") {
							v.autocomplete = "off"
						}
						if ((v.value && v.value == "true") || (v.value && v.value == "false")) {
							v.value = ""
							v.removeAttribute("value")
						}
					})
				})
			})
		},
		getpartName(name) {
			this.listParts.forEach(item => {
				if (name == item.partId) {
					this.partName = item.partName
				}
			})
		},
		getFinally(arr1, arr2) {
			let data1 = JSON.parse(JSON.stringify(arr1))
			let data2 = JSON.parse(JSON.stringify(arr2))
			this.getData = [...data1, ...data2]
			var mergedArray = this.getData.reduce(function (result, obj) {
				var target = result.find(function (item) {
					return item.productPartId === obj.productPartId
				})
				if (target) {
					Object.assign(target, obj)
				} else {
					result.push(obj)
				}
				return result
			}, [])
			this.finallylist = JSON.parse(JSON.stringify(mergedArray))
			this.copyList = JSON.parse(JSON.stringify(this.finallylist))
			this.addData()
		},
		inputData(event) {
			let input = document.getElementById(event.target.id)
			input.setAttribute("value", event.target.value)
			input.innerHTML = event.target.outerHTML
			this.htmlStr = document.getElementById("editorVal").innerHTML // 获取HTML字符串
		}
	}
}
</script>
<style scoped lang="scss">
.userdropdown {
	left: 220px !important;
	top: 160px !important;
	width: 800px !important;
	height: 70vh;
	overflow-y: auto;
}
.dialog-footers {
	position: fixed;
	bottom: 2px;
	right: 15px;
}
.conclusionFlag {
	display: flex;
	align-items: center;
}
.contentnew {
	width: 50%;
	margin: auto;
}
.contents {
	width: 100%;
	display: flex;
}
.contentsLeft {
	width: 800px;
	height: 100%;
	.box-card {
		overflow-y: auto;
		margin: 5px 10px;
		height: calc(100vh - 140px);
	}

	#editorVal {
		width: 760px !important;
		font-size: 14px;

		p {
			font-size: 14px;
		}
	}
}

.contentsLefts {
	width: 800px;
	height: 100%;
	margin: auto;
	.box-card {
		overflow-y: auto;
		margin: 5px 10px;
		height: calc(100vh - 140px);
	}
	#editorVal {
		width: 760px !important;
	}
}

.contentsRight {
	width: calc(100% - 780px);
	height: 100%;
	.box-card {
		overflow-y: auto;
		margin: 5px 10px;
		height: calc((100vh - 180px));
	}
	.box-cards {
		overflow-y: auto;
		margin: 5px 10px;
		height: calc((100vh - 180px));
	}
}

#editorVal {
	::v-deep input[type="text"] {
		border: none;
		outline: none;
		border-bottom: 1px solid #37b3b3;
		text-align: center !important;
	}

	::v-deep input[type="checkbox"] {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		-o-appearance: none;
		width: 18px;
		height: 18px;
		border: 1px solid #37b3b3;
		background-color: white;
		line-height: 18px;
		border-radius: 2px;
		color: #fff;
		text-align: center;
		font-size: 18px;
	}
	/* 取消状态 */
	::v-deep input[type="checkbox"]:after {
		width: 15px;
		height: 15px;
		display: block;
		content: "×";
		color: transparent;
		background-color: transparent;
	}

	/* 选中状态 */
	::v-deep input[type="checkbox"]:checked:after {
		content: "√";
		width: 15px;
		height: 15px;
		display: block;
		color: #37b3b3;
		background-color: #fff;
	}
}
.parts_Content {
	.parts_Contents {
		margin-top: 10px;
		display: flex;
		align-items: center;
	}
	.titles {
		margin: 0 10px;
		width: 100px;
		text-align: center;
	}
	.title {
		width: 110px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-right: 10px;
	}
}
</style>
